<template>
  <view class="diff">
    <view
      class="diff-item"
      v-for="item in 5"
      :key="item"
      :style="{
        'border-color': props.borderColor,
        'background-color': item <= props.rate ? props.activeColor : props.defaultColor
      }"
    >
    </view>
  </view>
</template>

<script setup>
  import { reactive, ref, onMounted, getCurrentInstance, defineProps } from 'vue';
  const props = defineProps({
    rate: {
      type: Number,
      default: 0
    },
    borderColor: {
      type: String,
      default: '#ff7a66'
    },
    defaultColor: {
      type: String,
      default: '#d9d9d9'
    },
    activeColor: {
      type: String,
      default: '#ff7a66'
    }
  });
</script>

<style lang="scss" scoped>
  .diff {
    display: inline-flex;
    &-item {
      height: 28rpx;
      line-height: 28rpx;
      width: 9rpx;
      margin-right: 7rpx;
      border: 3rpx solid;
    }
  }
</style>
